<!--实时库存-->
<template>
    <el-card shadow="never" class="aui-card--fill">
        <el-form :inline="true" :model="formInline">
            <el-form-item label="存货编号">
                <el-input v-model="formInline.code" placeholder="存货编号" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="存货名称">
                <el-input v-model="formInline.name" placeholder="存货名称" size="small" clearable></el-input>
            </el-form-item>
            <el-form-item label="库存预警">
                <el-select v-model="formInline.warning" placeholder="请选择">
                    <el-option v-for="item in warningData" :key="item.value" :label="item.label"
                               :value="item.value">
                    </el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit" size="small">查询</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="info" size="small" @click="exportHandle()">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table :data="tableData" border :row-class-name="tableRowClassName" show-summary
                  :summary-method="getSummaries">
            <el-table-column type="index" label="序号" align="center" :index="indexMethod">
            </el-table-column>
            <el-table-column prop="code" label="存货编码" align="center">
            </el-table-column>
            <el-table-column prop="dictCategory" label="类别" align="center">
            </el-table-column>
            <el-table-column prop="name" label="存货名称" align="center">
                <template slot-scope="scope">
                    <el-tooltip class="item" effect="dark" :content="scope.row.name" placement="top-start">
                        <div class="cell-content">{{ scope.row.name }}</div>
                    </el-tooltip>
                </template>
            </el-table-column>
            <el-table-column prop="model" label="规格型号" align="center">
            </el-table-column>
            <el-table-column prop="unit" label="计量单位" align="center">
            </el-table-column>
            <el-table-column prop="quantity" label="库存余量" align="center">
            </el-table-column>
            <el-table-column prop="unitFee" label="单价" align="center">
            </el-table-column>
            <el-table-column prop="totalFee" label="金额" align="center">
                <template slot-scope="scope">
                    {{ Math.floor(scope.row.quantity * scope.row.unitFee * 100) / 100 }}
                </template>
            </el-table-column>
            <el-table-column prop="alarmFlag" label="库存预警" align="center">
                <template slot-scope="scope">
                    {{ scope.row.alarmFlag === 0 ? '正常' : scope.row.alarmFlag === 1 ? '超量' : '不足' }}
                </template>
            </el-table-column>
            <el-table-column prop="quantityUpper" label="库存上限" align="center">
                <template slot-scope="scope">
                    <el-input v-if="scope.row.id===rowId" v-model="scope.row.quantityUpper"
                              placeholder="库存上限"></el-input>
                    <span v-else>{{ scope.row.quantityUpper }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="quantityLower" label="库存下限" align="center">
                <template slot-scope="scope">
                    <el-input v-if="scope.row.id===rowId" v-model="scope.row.quantityLower"
                              placeholder="库存下限"></el-input>
                    <span v-else>{{ scope.row.quantityLower }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="230">
                <template slot-scope="scope">
                    <el-button type="danger" size="small" @click="edit(scope.row)">安全库存设置</el-button>
                    <el-button type="warning" size="small" @click="save(scope.row)">保存</el-button>
                </template>
            </el-table-column>
        </el-table>
        <Pagination @sizeChange="sizeChange" @currentChange="currentChange" :total="total" :currentPage="currentPage"/>
    </el-card>
</template>

<script>
import Pagination from '../../../components/pagination.vue'
import mixinViewModule from '@/mixins/view-module'

export default {
    mixins: [mixinViewModule],
    components: {
        Pagination
    },
    data() {
        return {
            mixinViewModuleOptions: {
                getDataListURL: '/stock/stock/page',
                getDataListIsPage: true,
                exportURL: '/stock/stock/export',
            },
            tableData: [],
            rowId: '',
            currentPage: 1,//默认显示第一页
            pageSize: 10,//默认每页显示5条数据
            total: 0,//总条数
            formInline: {
                code: '',
                name: '',
                warning: ''
            },
            warningData: [
                {
                    value: '0',
                    label: '正常'
                },
                {
                    value: '1',
                    label: '超量'
                },
                {
                    value: '2',
                    label: '不足'
                },
            ],
        }
    },
    mounted() {
        this.getDataList();
    },
    methods: {
        // 列表的数据接口---------
        getDataList() {
            this.$http.get(`/stock/stock/page`, {
                params: {
                    page: this.currentPage,
                    limit: this.pageSize,
                    code: this.formInline.code,
                    name: this.formInline.name,
                    alarmFlag: this.formInline.warning,
                }
            }).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                this.tableData = res.data.list
                this.total = res.data.total
            }).catch(() => {
            });
        },
        // 每页条数
        sizeChange(val) {
            this.pageSize = val;
            this.getDataList()
        },
        // 当前页
        currentChange(val) {
            this.currentPage = val
            this.getDataList()
        },
        onSubmit() {
            this.getDataList();
        },
        // 序号
        indexMethod(index) {
            return index + 1;
        },
        // 安全库存设置
        edit(row) {
            this.rowId = row.id;
        },
        // 安全库存设置-保存-调接口
        save(row) {
            this.$http.put(`/stock/stock`, row).then(({data: res}) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg);
                }
                window.location.reload();
            }).catch(() => {
            });
        },
        // 库存过量（黄色）或者不足（红色）
        tableRowClassName({row, rowIndex}) {
            if (row.alarmFlag === 1) {
                return 'warning-row';
            } else if (row.alarmFlag === 2) {
                return 'success-row';
            }
            return '';
        },
        // 表格合计
        getSummaries(param) {
            const {columns, data} = param
            const sums = []
            columns.forEach((column, index) => {
                if (index === 0) {
                    sums[index] = '合计:'
                    //只计算最后一列
                } else if (index === 8) {
                    const values = data.map(item => Number(item[column.property]))
                    if (!values.every(value => isNaN(value))) {
                        sums[index] = values.reduce((prev, curr) => {
                            const value = Number(curr)
                            if (!isNaN(value)) {
                                return prev + curr
                            } else {
                                return prev
                            }
                        }, 0)
                        sums[index] += ' 元';
                    } else {
                        sums[index] = '';
                    }
                } else {
                    sums[index] = ''
                }
            })
            return sums
        }
    }
}
</script>

<style>
.el-table .warning-row {
    background: #f4e1bc
}

.el-table .success-row {
    background: #fbb7b7;
}

.cell-content {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item {
    min-width: 0;
}
</style>
